<!--  -->
<template>
<div class="map-main">
    <Navbar :title="maptitle" />
    <div class="locationSearch">
      <!-- <input  type="text" id="suggestId" size="20" value="地址搜索" /> -->
      <van-field class="locationInfo" v-model="keywords" @imput="iptEvents" placeholder="地址搜索" />
    </div>
    <div
      id="searchResultPanel"
      style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"
    ></div>
    <div class="currentAddress">
      <div>
        {{district}}
        <span>地址:成都</span>
      </div>
    </div>
    <div class="mapLocation">
      <div class="locationText">显示当前位置:</div>
      <baidu-map id="mapbox" :center="center" :zoom="zoom" @ready="baiduMap">

      </baidu-map>
    </div>
  </div>
</template>

<script>
import Navbar from "@/components/Navbar";
import Vue from "vue";
import { Field } from "vant";

Vue.use(Field);
import bus from "@/bus.js";
export default {
  name: "mapBox",
  components: {
    Navbar,
  },
  data() {
    return {
      maptitle: "地图页",
      center: { lng: 0, lat: 0 },
      zoom: 3,
      district: "",
      keywords: "",
    };
  },
  created() {},
  methods: {
    iptEvents(){
     
      var _this = this;
      var map = new BMap.Map("mapbox");
      map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

      var options = {
        onSearchComplete: function(results){
          // 判断状态是否正确
          if (local.getStatus() == BMAP_STATUS_SUCCESS){
            console.log(results);
            _this.tips = results.Hr;
          }
        }
      };
      var local = new BMap.LocalSearch(map, options);
      local.search(_this.keywords);
    },


    baiduMap() {
     
      var map = new BMap.Map("mapbox");
      var point = new BMap.Point(116.331398, 39.897445);
      map.centerAndZoom(point, 12);

      map.enableScrollWheelZoom(true); //启用滚轮放大缩小，默认禁用

      var marker = new BMap.Marker(point);
      map.addOverlay(marker);

      var geolocation = new BMap.Geolocation();
      geolocation.getCurrentPosition(
        function (r) {
          if (this.getStatus() == BMAP_STATUS_SUCCESS) {
            var mk = new BMap.Marker(r.point);
            map.addOverlay(mk);
            map.panTo(r.point);
            // alert('您的位置：'+r.point.lng+','+r.point.lat);
            console.log(r);
          } else {
            alert("failed" + this.getStatus());
          }
        },
        { enableHighAccuracy: true }
      );
    },
  },
};
</script>

<style lang='scss' scoped>
.map-main {
  height: calc(100vh);
  background-color: $bagColor;
  .locationSearch {
    margin-top: 10px;
    .locationInfo {
      margin: 15px;
      width: 345px;
      ::v-deep .van-field__control {
        border: 1px solid #999 !important;
        height: 30px;
      }
    }
  }
  .currentAddress {
    margin-left: 30px;
  }
  .mapLocation {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    .locationText {
      font-size: 16px;
      padding: 15px;
      font-weight: 700;
    }
    #mapbox {
      height: 200px;
      overflow: hidden;
      margin: 0;
      font-family: "微软雅黑";
    }
  }
}
</style>